<template>
  <div class="container">
    <Breadcrumb :items="['menu.adminManage', 'menu.systemFile']" />
    <a-card class="custom-card" title="">
      <a-row style="margin-bottom: 10px">
        <a-col :span="24">
          <a-breadcrumb>
            <a-breadcrumb-item v-for="(breadcrumb, index) in breadcrumbs" :key="index">
              <a-link :hoverable="false" @click="viewFloder(breadcrumbs[index].path)">
                <span v-if="!breadcrumbs[index].name"><icon-home /></span>
                <span v-else>{{ breadcrumbs[index].name }}</span>
              </a-link>
            </a-breadcrumb-item>
          </a-breadcrumb>
        </a-col>
      </a-row>
      <a-table
        row-key="id"
        :loading="loading"
        :pagination="false"
        :data="renderData"
        :bordered="{ wrapper: true, cell: true }"
        column-resizable
      >
        <template #columns>
          <a-table-column title="名称" data-index="name" :width="200">
            <template #cell="{ record }">
              <span v-if="record.link">
                <a-link :hoverable="false" @click="viewFloder(record.link)"><i :class="record.icon"></i> {{ record.name }}</a-link>
              </span>
              <span v-else><i :class="record.icon"></i> {{ record.name }}</span>
            </template>
          </a-table-column>
          <a-table-column title="大小" data-index="filesize" align="center" :width="100"/>
          <a-table-column title="时间" data-index="modif" align="center" :width="160"/>
          <a-table-column title="属性" data-index="perms" align="center" :width="100"/>
          <a-table-column title="所有者" data-index="owner" align="center" :width="100">
            <template #cell="{ record }">
              {{ record.owner.name }}:{{ record.group.name }}
            </template>
          </a-table-column>
          <a-table-column title="操作" data-index="operations" align="center" fixed="right" :width="200">
            <template #cell="{ record }">
              <a-space>
                <a-button v-if="!record.link" type="primary" size="small" @click="handle(record, 'view')"><template #icon><icon-eye /></template>查看</a-button>
                <a-button type="primary" status="warning" size="small" @click="handle(record, 'rename')"><template #icon><icon-edit /></template>重命名</a-button>
                <a-popconfirm content="确定要删除据吗？" type="warning" position="br" @ok="handle(record, 'delete')">
                  <a-button type="primary" status="danger" size="small"><template #icon><icon-delete /></template>删除</a-button>
                </a-popconfirm>
              </a-space>
            </template>
          </a-table-column>
        </template>
      </a-table>
      <div v-show="!loading" class="total-text">
        文件总大小：<a-tag color="#f53f3f">{{ stateObj.all_files_size }}</a-tag>
        文件数：<a-tag color="#eb0aa4">{{ stateObj.num_files }}</a-tag>
        文件夹数：<a-tag color="#7bc616">{{ stateObj.num_folders }}</a-tag>
        分区大小：<a-tag color="#0fc6c2">{{ stateObj.partition_size }}</a-tag>
        剩余大小：<a-tag color="#168cff">{{ stateObj.free_of_size }}</a-tag>
      </div>
    </a-card>

    <a-modal
      v-model:visible="renameDialogVisible"
      :title="renameDialogTitle"
      :mask-closable="false"
      @before-ok="renameDialogBeforeOk"
    >
      <a-form ref="renameFormRef" :model="renameData">
        <a-form-item
          field="name"
          label="名称"
          required
          :validate-trigger="['change','input']"
          :rules="[
            {
              required: true,
              message: '名称不能为空',
            },
          ]"
        >
          <a-input v-model="renameData.name" placeholder="请输入名称" style="width: 80%"/>
        </a-form-item>
      </a-form>
    </a-modal>

    <a-modal
      v-model:visible="viewDialogVisible"
      :title="viewDialogTitle"
      :align-center="false"
      top="15vh"
      :mask-closable="false"
    >
      <code>{{ stateObj.fileText }}</code>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { useI18n } from 'vue-i18n';
  import { FormInstance } from '@arco-design/web-vue/es/form';

  import useLoading from '@/hooks/loading';
  import { DataState, QueryParams, apiList, apiHandle } from '@/api/system-file';

  const { loading, setLoading } = useLoading(true);
  const { t } = useI18n();
  const renderData = ref<DataState[]>([]);

  const renameFormRef = ref<FormInstance>();
  const renameData = ref({
    from_name: '',
    name: '',
  });
  const renameDialogVisible = ref(false);
  const renameDialogTitle = ref();
  const viewDialogVisible = ref(false);
  const viewDialogTitle = ref();
  const breadcrumbs = ref<any>([]);

  const stateObj: any = {
    path: '',
    breadcrumbs: [],
    all_files_size: 0,
    num_files: 0,
    num_folders: 0,
    partition_size: 0,
    free_of_size: 0,

    fileText: '<code></code>',
  };

  // 列表
  const fetchData = async (
    params: QueryParams = { path: stateObj.path }
  ) => {
    setLoading(true);
    try {
      const { data } = await apiList(params);
      renderData.value = data.data;
      breadcrumbs.value = data.breadcrumbs;
      stateObj.path = data.path;
      // stateObj.breadcrumbs = data.breadcrumbs;
      stateObj.all_files_size = data.all_files_size;
      stateObj.num_files = data.num_files;
      stateObj.num_folders = data.num_folders;
      stateObj.partition_size = data.partition_size;
      stateObj.free_of_size = data.free_of_size;
    } catch (err) {
      // you can report use errorHandler or other
    } finally {
      setLoading(false);
    }
  };
  // 查看文件夹/返回目录
  const viewFloder = (path: string) => {
    stateObj.path = path;
    fetchData();
  };
  // 操作
  const handle = async (row: DataState, type: string) => {
    if (type === 'view') {
      // 查看
      setLoading(true);
      try {
        const { data } = await apiHandle({
          path: stateObj.path,
          action: type,
          name: row.name,
        });
        viewDialogVisible.value = true;
        viewDialogTitle.value = row.name;
        stateObj.dialogTitle = row.name;
        stateObj.fileText = data;
      } catch (err) {
        setLoading(false);
      } finally {
        setLoading(false);
      }
    } else if (type === 'rename') {
      // 重命名
      renameDialogVisible.value = true;
      renameDialogTitle.value = `重命名: ${row.name}`;
      renameData.value.name = row.name;
      renameData.value.from_name = row.name;
    } else if (type === 'delete') {
      // 删除
      setLoading(true);
      try {
        await apiHandle({
          path: stateObj.path,
          action: type,
          name: row.name,
        });
        fetchData();
      } catch (err) {
        setLoading(false);
      } finally {
        setLoading(false);
      }
    }
  };
  const renameSubmit = async (done: any) => {
    try {
      const ruleRes = await renameFormRef.value?.validate();
      if (!ruleRes) {
        await apiHandle({
          path: stateObj.path,
          action: 'rename',
          from_name: renameData.value.from_name,
          name: renameData.value.name,
        });
        done();
        fetchData();
      } else {
        done(false);
      }
    } catch (err) {
      done(false);
    } finally {
      done(false);
    }
  };

  const renameDialogBeforeOk = (done: any) => {
    renameSubmit(done);
  };

  fetchData();
</script>

<script lang="ts">
  export default {
    name: 'SystemFile',
  };
</script>

<style scoped lang="less">
  @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');
  .container {
    padding: 0 20px 20px 20px;
  }
  :deep(.arco-table-th) {
    &:last-child {
      .arco-table-th-item-title {
        margin-left: 16px;
      }
    }
  }

  .total-text {
    border-left: 1px solid #dfe6ec;
    border-right: 1px solid #dfe6ec;
    border-bottom: 1px solid #dfe6ec;
    height: 35px;
    line-height: 35px;
    padding-left: 10px;
    font-size: 14px;
    color: #606266;
  }

  i.fa.fa-folder-o {
    color: #0157b3
  }
  i.fa.fa-picture-o {
    color: #26b99a
  }
  i.fa.fa-file-archive-o {
    color: #da7d7d
  }
  i.fa.fa-css3 {
    color: #f36fa0
  }
  i.fa.fa-file-code-o {
    color: #007bff
  }
  i.fa.fa-code {
    color: #cc4b4c
  }
  i.fa.fa-file-text-o {
    color: #0096e6
  }
  i.fa.fa-html5 {
    color: #d75e72
  }
  i.fa.fa-file-excel-o {
    color: #09c55d
  }
  i.fa.fa-file-powerpoint-o {
    color: #f6712e
  }
</style>
